<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    div, p {
        width: 300px;
        height: 30px;
        line-height: 30px;
        color: #fff;
        background-color: skyblue;
    }
</style>
<body>

<button>显示当前系统时间</button>
<div>某个时间</div>
<p>123</p>
<a href="#"> 我是文件
    <span>    123</span>
</a>


<script>
    <!--1.改变元素内容 -->
    // 当我们点击按钮, div里面的文字会发生变化
    const btn = document.querySelector('button');
    const div = document.querySelector('div');

    btn.onclick = function () {
        div.innerText = getDate();
    }

    // 我们可以不用添加事件
    const p = document.querySelector('p');
    p.innerText = getDate();


    // innerHTML 和 innerText的区别
    // 1.innerText不识别html标签     非标准      去除空格和换行
    // 2.innerHTML识别html标签       W3C标准     保留空格和换行
    // innerHTML 和 innerText 这两个属性是可读的  可以获取元素里面的内容
    var a = document.querySelector('a');
    console.log(a.innerText);       // 我是文件 123
    console.log(a.innerHTML);       //  我是文件
                                    //    <span>123</span>


    function getDate() {
        return new Date().toString();
    }
</script>
</body>
</html>
